<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>Draw Polygon</title>

  </head>

  <body>

    <canvas id="myCanvas" width="400" height="400"></canvas>

    <script>

      const polygon = {

        name: 'polygon3',

        points: [[20, 20], [20, 30], [30, 30], [30, 50], [30, 20]],

        area: 100

      };

      

      const canvas = document.getElementById('myCanvas');

      const ctx = canvas.getContext('2d');

      ctx.beginPath();

      ctx.moveTo(polygon.points[0][0], polygon.points[0][1]);

      for (let i = 1; i < polygon.points.length; i++) {

        ctx.lineTo(polygon.points[i][0], polygon.points[i][1]);

      }

      ctx.closePath();

      ctx.fillStyle = '#ff0000';

      ctx.fill();

    </script>

  </body>

</html>